<template>
	<div class="container">
		<h1>Hello Employee!</h1>
		<div class="content">
			<el-icon size="40px" class="icon"><Bottom /></el-icon>
			<h2 class="mb-4">Please choose your plans!</h2>
		</div>
		<div class="content">
			<h3 class="mb-4">Optional Duration:</h3>
			<el-row class="mb-4">
				<el-button type="primary" plain>Daily</el-button>
				<el-button type="primary" plain>Weekly</el-button>
				<el-button type="primary" plain>Monthly</el-button>
				<el-button type="primary" plain>Seasonly</el-button>
				<el-button type="primary" plain>Yearly</el-button>
			</el-row>
		</div>
		<div class="listContent">
			<div class="option">
				<el-descriptions title="Copper" border="true">
					<el-descriptions-item label="Priority">middle</el-descriptions-item>
					<el-descriptions-item label="Available Time"
						>11:00-18:00</el-descriptions-item
					>
					<el-descriptions-item label="Available Area"
						>Only District
					</el-descriptions-item>
					<el-descriptions-item label="Price">
						<el-tag size="success">12.99$</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="Customer Service"
						>AI Customer Service</el-descriptions-item
					>
				</el-descriptions>
			</div>
			<div class="option">
				<el-descriptions title="Silver" border="true">
					<el-descriptions-item label="Priority">high</el-descriptions-item>
					<el-descriptions-item label="Available Time"
						>07:00-18:00</el-descriptions-item
					>
					<el-descriptions-item label="Available Area"
						>Only Province</el-descriptions-item
					>
					<el-descriptions-item label="Price">
						<el-tag size="success">17.99$</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="Customer Service"
						>AI Customer Service and Personal Customer
						Service</el-descriptions-item
					>
				</el-descriptions>
			</div>
			<div class="option">
				<el-descriptions title="Gold" border="true">
					<el-descriptions-item label="Priority"
						>very high</el-descriptions-item
					>
					<el-descriptions-item label="Available Time"
						>whole day</el-descriptions-item
					>
					<el-descriptions-item label="Available Area"
						>National</el-descriptions-item
					>
					<el-descriptions-item label="Price">
						<el-tag size="success">23.99$</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="Customer Service"
						>AI Customer Service and Personal Customer
						Service</el-descriptions-item
					>
				</el-descriptions>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="content">
			<el-icon size="40px" class="icon"><Box /></el-icon>
			<h2 class="mb-4">Wanna know the nearest bike-sharing shop?</h2>
		</div>
		<div class="content">
			<h3 class="mb-4">Please select your position:</h3>
			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
		</div>
		<div class="content">
			<h3 class="mb-4">Check your result:</h3>
		</div>
		<div class="content">
			<div class="demo-progress">
				<el-progress :percentage="100" :format="format" :indeterminate="true">
					<el-button text>A shop 17km</el-button>
				</el-progress>
				<el-progress :percentage="100" :format="format" :indeterminate="true">
					<el-button text>B shop 27km</el-button>
				</el-progress>
				<el-progress :percentage="100" :format="format" :indeterminate="true">
					<el-button text>C shop 37km</el-button>
				</el-progress>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="content">
			<el-icon size="40px" class="icon"><Bicycle /></el-icon>
			<h2 class="mb-4">Wanna find the most suitable map for you?</h2>
		</div>
		<div class="content">
			<h3 class="mb-4">Please select your start point:</h3>
			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
		</div>
		<div class="content">
			<h3 class="mb-4">Please select your finish point:</h3>
			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
		</div>
		<div class="content">
			<h3 class="mb-4">Check your map:</h3>
		</div>
		<div class="content">
			<div class="mapContainer" id="mapContainer"></div>
		</div>
		<div class="content">
			<el-icon size="30px" color="blue" class="icon"
				><LocationInformation
			/></el-icon>
			<h3 class="mb-4 mapLink" @click="toMap">Click here for more details</h3>
		</div>
	</div>
</template>

<style scoped>
.mapContainer {
	width: 90%;
	height: 500px;
	margin-left: 40px;
	cursor: pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.mapContainer:hover {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
}

.container {
	width: 100%;
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}

.content {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.mb-4 {
	margin-left: 20px;
	justify-content: center;
	align-items: center;
}

.m-2 {
	margin-left: 20px;
}

.icon {
	margin-left: 15px;
}

.mapLink {
	color: blue;
	cursor: pointer;
}

/* 鼠标悬停阴影效果 */
.option {
	width: 46%;
	background-color: white;
	margin: 20px;
	padding: 10px;
	cursor: pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.option:hover {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
}

.listContent {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}

div {
	border-radius: 5px;
}

/* 响应式布局，换行展示 */
@media screen and (min-width: 0px) and (max-width: 900px) {
	.option {
		width: 90%;
		background-color: white;
		margin: 20px;
		padding: 10px;
		cursor: pointer;
	}
}

.demo-progress .el-progress--line {
	margin-bottom: 15px;
	width: 350px;
	margin-left: 20px;
}
</style>

<script lang="ts" setup>
import { reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader"; // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { ref } from "vue";
import router from "../router/index";
const format = (percentage) => (percentage === 100 ? "Full" : `${percentage}%`);

const value = ref("");

const options = [
	{
		value: "Option1",
		label: "Option1",
	},
	{
		value: "Option2",
		label: "Option2",
	},
	{
		value: "Option3",
		label: "Option3",
	},
	{
		value: "Option4",
		label: "Option4",
	},
	{
		value: "Option5",
		label: "Option5",
	},
];

const toMap = () => {
	console.log(123);
	router.push("/Map");
};

const state = reactive({
	path: [],
	current_position: [],
});

//进行地图初始化
function initMap() {
	AMapLoader.load({
		key: "5a19088d1fb8c4c662785dc5f9294691", // 申请好的Web端开发者Key，首次调用 load 时必填
		version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
	})
		.then((AMap) => {
			const map = new AMap.Map("mapContainer", {
				//设置地图容器id
				viewMode: "3D", //是否为3D地图模式
				zoom: 10, //初始化地图级别
				center: [120.374926, 30.310678], //初始化地图中心点位置
			});
			//添加插件
			AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye"], function () {
				//异步同时加载多个插件
				map.addControl(new AMap.HawkEye()); //显示缩略图
				map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
			});
			// 单击
			map.on("click", (e) => {
				// console.log(e);
				// state.current_position = [e.lnglat.KL, e.lnglat.kT];
				// state.path.push([e.lnglat.KL, e.lnglat.kT]);
				addMarker();

				addPolyLine();
				// 地图按照适合展示图层内数据的缩放等级展示
				// map.setFitView();
			});

			// 实例化点标记
			function addMarker() {
				const marker = new AMap.Marker({
					icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
					position: state.current_position,
					offset: new AMap.Pixel(-26, -54),
				});
				marker.setMap(map);
			}

			// 折线
			function addPolyLine() {
				const polyline = new AMap.Polyline({
					path: state.path,
					isOutline: true,
					outlineColor: "#ffeeff",
					borderWeight: 1,
					strokeColor: "#3366FF",
					strokeOpacity: 0.6,
					strokeWeight: 5,
					// 折线样式还支持 'dashed'
					strokeStyle: "solid",
					// strokeStyle是dashed时有效
					// strokeDasharray: [10, 5],
					lineJoin: "round",
					lineCap: "round",
					zIndex: 50,
				});
				map.add([polyline]);
			}
		})
		.catch((e) => {
			console.log(e);
		});
}
initMap();
</script>
